<template>
  <div class="cell">
    <el-tooltip effect="dark" :content="item.button_name" placement="right">
      <div class="cell__row" :style="{ paddingLeft: `${item.layer * 20 + 10}px`}">
        <i
          v-if="item.hasChildren"
          class="el-icon-arrow-down arrow__btn"
          :class="{ 'expand': item.expand }"
          @click="expand">
        </i>
        <span>{{ item.button_name }}</span>
      </div>
    </el-tooltip>
    <div class="cell__row">
      {{ item.button_id }}
    </div>
    <div class="cell__row">
      {{ item.click_times }}
    </div>
    <div class="cell__row">
      {{ item.click_users }}
    </div>
    <div class="cell__row">
      {{ item.avg_times }}
    </div>
    <div class="cell__row">
      <el-button size="mini" type="primary" @click="$emit('check', item)">查看</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    expand () {
      this.$emit('expand', this.item)
    }
  }
}
</script>

<style lang="scss" scoped>
.cell {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr;
  box-sizing: border-box;
  height: 100%;
}
.cell__row {
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-right: 0;
  border-top: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  box-sizing: border-box;
  span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .arrow__btn {
    cursor: pointer;
    transform: rotate(-90deg);
    &.expand {
      transform: rotate(0deg);
    }
  }
}
</style>
